<template>
	<a-row :gutter="10" class="mb-2" v-if="!props.hiddenFlag">
		<a-col :span="24">
			<a-card>
				<a-space>
					<a-input-search placeholder="请输入内容" v-model:value="search" @search="refresh"></a-input-search>
					<a-button @click="add" type="primary">新增</a-button>
				</a-space>
			</a-card>
		</a-col>
	</a-row>

	<a-row :gutter="10" v-if="!props.hiddenFlag">
		<a-col :span="24">
			<a-card>
				<h-table ref="tableRef" :columns="columns" :data="queryTableList" height="200px"></h-table>
			</a-card>
		</a-col>
	</a-row>

	<a-modal :closable="false" v-model:open="versionDiag.visible" width="300px">
		<a-form :model="versionDiag">
			<a-form-item label="版本">
				<a-input
					v-model:value="versionDiag.processVersion"
					:disabled="versionDiag.id != null"
					autocomplete="off"
				></a-input>
			</a-form-item>
			<a-form-item label="描述">
				<a-input v-model:value="versionDiag.description" autocomplete="off"></a-input>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-space>
				<a-button @click="versionDiag.visible = false">取 消</a-button>
				<a-button type="primary" @click="save">确 定</a-button>
			</a-space>
		</template>
	</a-modal>
</template>

<script setup name="processVersionManager">
import {watch, ref, defineProps} from 'vue'
import processVersionApi from '@/api/process/processVersionApi'
import {useRouter} from 'vue-router'
import {message} from 'ant-design-vue'

const search = ref()
const processId = ref();
const props = defineProps(['processId', 'processVersionCallback', 'hiddenFlag', 'operaCallback'])
// const { proxy } = getCurrentInstance();
const versionDiag = ref({
	visible: false,
	viewFlag: false,
	id: null,
	processId: null,
	processVersion: '',
	description: ''
})
const tableRef = ref()
onMounted(() => {
	processId.value = props.processId
})
const refresh = () => {
	if (props.hiddenFlag) {
		return
	}
	tableRef.value.refresh(true)
}

const columns = ref([
	{
		title: '名称',
		key: 'processName',
		dataIndex: 'processName',
		ellipsis: true
	},
	{
		title: '编码',
		key: 'processCode',
		dataIndex: 'processCode',
		ellipsis: true
	},
	{
		title: '版本',
		key: 'processVersion',
		dataIndex: 'processVersion',
		ellipsis: true
	},
	{
		title: '描述',
		key: 'description',
		dataIndex: 'description',
		ellipsis: true
	},
	{
		title: 'latest',
		key: 'latestFlag',
		dataIndex: 'latestFlag',
		mapping: [
			{
				key: '1',
				value: 'latest'
			},
			{
				key: '0',
				value: 'unlatest'
			}
		],
		click: (field, record) => {
			setLatestFlag(record)
		},
		ellipsis: true
	},
	{
		title: '启停状态',
		key: 'disableFlag',
		dataIndex: 'disableFlag',
		ellipsis: true,
		mapping: [
			{
				key: '1',
				value: '停用'
			},
			{
				key: '0',
				value: '启用'
			}
		]
	},
	{
		title: '操作',
		key: 'action',
		width: 150,
		dataIndex: 'action',
		ellipsis: true,
		fixed: 'right',
		buttonList: [
			{
				type: 'primary',
				click: (field, record) => {
					edit(record)
				},
				render: (record) => {
					return '编辑'
				}
			},
			{
				click: (field, record) => {
					config(record)
				},
				render: (record) => {
					return '配置'
				}
			},
			{
				click: (field, record) => {
					remove(record)
				},
				render: (record) => {
					return '删除'
				}
			}
		]
	}
])

const add = () => {
	versionDiag.value = {}
	versionDiag.value.visible = true
}
const edit = async (row) => {
	const data = await processVersionApi.getById({
		id: row.id
	})
	versionDiag.value = data
	versionDiag.value.visible = true
	// processId.value = versionDiag.value.processId
}

watch(
	() => props.processId,
	(newValue, oldValue) => {
		processId.value = props.processId;
		refresh()
	}
)
const remove = async (row) => {
	await processVersionApi.removeById({
		id: row.id
	})
	if (props.operaCallback) {
		props.operaCallback('delete', 'processVersion', row)
	}
	refresh()

}

const router = useRouter()

const config = (row) => {
	if (props.processVersionCallback) {
		props.processVersionCallback({
			processVersionId: row.id,
			processName: row.processName,
			processCode: row.processCode,
			processId: row.processId,
			processVersion: row.processVersion
		})
		return
	}
	router.push({
		path: '/process/flow',
		query: {
			id: row.id
		}
	})
}
const save = async () => {
	if (versionDiag.value.viewFlag) {
		versionDiag.value.viewFlag = false
		versionDiag.value.visible = false
		return
	}
	if (!processId.value) {
		message.error('错误操作，没有获取到流程ID')
		return
	}
	versionDiag.value.processId = processId.value

	if (!versionDiag.value.processVersion) {
		message.error('请输入版本')
		return
	}

	let id = await processVersionApi.save(versionDiag.value)
	if (props.operaCallback) {
		props.operaCallback(versionDiag.value.id ? 'edit' : 'add', 'processVersion', {
			id,
			...versionDiag.value
		})
	}
	versionDiag.value.processVersion = ''
	versionDiag.value.description = ''
	versionDiag.value.visible = false
	versionDiag.value.id = null
	refresh()
}
const setStatusFlag = async (row) => {
	await processVersionApi.setStatusFlag({
		id: row.id,
		disableFlag: row.disableFlag == '1' ? '0' : '1'
	})
	refresh()
}
const setLatestFlag = async (row) => {
	await processVersionApi.setLatestFlag({
		id: row.id,
		latestFlag: row.latestFlag == '1' ? '0' : '1'
	})
	refresh()
}

const queryTableList = async () => {
	if (!processId.value) {
		return
	}
	const data = await processVersionApi.queryList({
		processId: processId.value
	})
	return data
}


const show = (action, data) => {
	if (action == 'add') {
		processId.value = data.id;
		add()
	} else if (action == 'delete') {
		remove(data);
	} else if (action == 'edit') {
		processId.value = data.processId;
		edit(data);
	}
}

defineExpose({
	show
})
</script>

<style scoped></style>
